<template>
  <div class="home">
    <div class="wrap">
      <template v-if="!isNull(data)">
        <div>
          <h2 class="title">{{ data.title }}</h2>
          <div class="text">
            <el-link type="primary" @click="handleClickDownload(data.filePath)"
              >全文下载</el-link
            >
            <p class="time">
              <span
                >发布于：{{
                  formatDate(data.publishedTime, "yyyy-MM")
                }}</span
              >
              <el-divider direction="vertical"></el-divider>
              <span>下载量：{{ data.downloads || 0 }}</span>
            </p>
            <p class="author time">
              作者：
              <el-tag
                effect="plain"
                style="margin-left: 10px;"
                v-for="(item, index) in data.authers"
                :key="index"
                >{{ item }}</el-tag
              >
            </p>
            <p class="keyword time">
              关键字：
              <el-tag
                effect="plain"
                style="margin-left: 10px;"
                v-for="(item, index) in data.keywords"
                :key="index"
                >{{ item }}</el-tag
              >
            </p>
            <p class="summary">{{ data.summary }}</p>
          </div>
        </div>
      </template>
      <template v-else>
        <div>
          无数据
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { searchById } from "../../api/v1/paperSearch";
import { formatDate } from "../../libs/tools";
export default {
  name: "Detail",
  data() {
    return {
      data: {
        authers: [],
        downloads: 0,
        filePath: "",
        id: "",
        keywords: [],
        publishedTime: "",
        summary: "",
        title: "",
      },
    };
  },
  methods: {
    isNull(obj) {
      return Object.keys(obj).length === 0 ? true : false;
    },
    formatDate,
    handleClickDownload(url) {
      if (!url) {
        this.$message.error("该论文暂无资源");
      } else {
        window.open(url, "_blank")
      }
    },
  },
  created() {
    searchById(this.$route.params.id)
      .then((res) => {
        if (res.status === 200) {
          this.data = res.data;
        }
      })
      .catch((e) => {
        console.log(e);
      });
  },
};
</script>

<style scoped>
.home {
  position: relative;
  margin: 0 auto;
  padding-top: 10vh;
  height: 100%;
}

.wrap {
  min-height: calc(100vh - 10vh - 40px - 23px);
}

.title {
  color: #1a1a1a;
  font-size: 28px;
  font-weight: 600;
}

.time {
  color: #8590a6;
}

.summary {
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.8;
}
</style>
